import { Form, Select, message, Upload, Icon } from 'antd';
import React from 'react';
import { useState } from 'react';

// 

export const FileUploadForm = props => {
  const {
    form,
    field = 'import_file',

    onUpload,

  } = props;

  const [file, setFile] = useState();

  const uploadProps = {
    name: 'file',
    multiple: false,
    // action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
    onChange (info) {
      const { status } = info.file;

      if (status !== 'uploading') {
      }

      if (status === 'done') {
        message.success(`${info.file.name} 上传成功.`);

        // onUpload && onUpload(info.file);

        setFile(info.file);
      } else if (status === 'error') {

        message.error(`${info.file.name} 上传失败.`);
      }
    },
  };

  const normFile = e => {
    if (Array.isArray(e)) {
      return e;
    }
    return e && e.fileList;
  };

  return (
    <Form.Item wrapperCol={{ span: 24 }}>
      {form.getFieldDecorator(field, {
        valuePropName: 'fileList',
        getValueFromEvent: normFile,
        rules: [{ required: true, message: '请上传文件！' }],
      })(
        <Upload.Dragger {...uploadProps}>
          <p className="ant-upload-drag-icon">
            <Icon type="inbox" />
          </p>
          <p className="ant-upload-text">点击或拖动文件到此上传</p>
          <p className="ant-upload-hint"></p>
        </Upload.Dragger>,
      )}
    </Form.Item>
  )
}